<template>
	<view class="container">
		<view class="wallet-list x-f" v-for="item in walletList" :key="item.id">
			<image class="head-img" :src="item.avatar" mode=""></image>
			<view class="list-content y-f">
				<view class="title-box x-bc">
					<text class="title one-t">{{ item.type_name }}-{{ item.title }}</text>
					<view class="money">
						<text v-if="item.is_add" class="add">+{{ item.wallet }}</text>
						<text v-else class="minus">-{{ item.wallet }}</text>
					</view>
				</view>
				<view class="tip-box x-bc">
					<text class="time">{{ tools.dateFormat('YYYY-mm-dd HH:MM', new Date(item.createtime * 1000)) }}</text>
					<text class="from"></text>
				</view>
			</view>
		</view>
		<view v-if="walletList.length" class="cu-load text-gray" :class="loadStatus"></view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			tools: this.$tools,
			isBottom: false,
			walletList: [],
			type: {
				income: '收入',
				withdraw: '提现',
				consume: '消费',
				transfer: '余额互转'
			},
			loadStatus: '', //loading,over
			currentPage: 1,
			lastPage: 0
		};
	},
	computed: {},
	onPullDownRefresh() {
		this.isBottom = true;
	},
	onLoad() {
		this.getWalletLog();
	},
	onReachBottom() {
		if (this.currentPage < this.lastPage) {
			this.currentPage += 1;
			this.getWalletLog();
		}
	},
	methods: {
		// 钱包明细
		getWalletLog() {
			let that = this;
			that.loadStatus = 'loading';
			that.$api('user_wallet_log', {
				wallet_type: 'money',
				page: that.currentPage
			}).then(res => {
				if (res.code === 1) {
					that.walletList = [...that.walletList, ...res.data.data];
					that.lastPage = res.data.last_page;
					if (that.currentPage < res.data.last_page) {
						that.loadStatus = '';
					} else {
						that.loadStatus = 'over';
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}

.container {
	border-top: 1rpx solid #f5f5f5;
}

.wallet-list {
	width: 750rpx;

	.head-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: #ccc;
		margin: 30rpx;
	}

	.list-content {
		height: 160rpx;
		justify-content: space-between;
		align-items: flex-start;
		flex: 1;
		padding: 30rpx 30rpx 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.title-box,
	.tip-box {
		width: 100%;
	}

	.title {
		font-size: 30rpx;
		width: 400rpx;
	}

	.money {
		font-size: 34rpx;
		font-weight: bold;

		.add {
			color: #d89f64;
		}

		.minus {
			color: #000;
		}
	}

	.time {
		color: #999;
		font-size: 26rpx;
	}
}
</style>
